<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <!-- 头部导航 -->
    <header>
        <div class="header-container">
            <div class="header-nav">
                <a href="javascript:;">魅族官网</a>
                <a href="javascript:;">魅族商城</a>
                <a href="javascript:;">Flyme</a>
                <a href="javascript:;">专卖店</a>
                <a href="javascript:;">服务</a>
                <a href="javascript:;">社区</a>
            </div>
            
            <div class="header-tools">
                <ul>
                    <a href="javascript:;">我的收藏<span class="new-icon"></span></a>
                    <a href="javascript:;">我的订单</a>
                    <a href="javascript:;">登录</a>
                    <a href="javascript:;">注册</a>
                </ul>
            </div>
        </div>
    </header>
    <!-- Logo区 -->
    <div class="tittle">
        <div class="tittle-container">
            <div class="logo"></div>
            <div class="logo-nav">
                <a href="javascript:;">PRO手机</a>
                <a href="javascript:;">魅蓝手机</a>
                <a href="javascript:;">MX手机</a>
                <a href="javascript:;">精选配件</a>
                <a href="javascript:;">智能硬件</a>
            </div>
        </div>
    </div>
    <!-- banner区 -->
    <div class="banner">
        <div class="banner-container">
            <div class="banner-nav">
                <a href="javascript:;">全部商品分类</a>
                <a href="javascript:;">手机</a>
                <a href="javascript:;">智能硬件</a>
                <a href="javascript:;">耳机 / 音箱</a>
                <a href="javascript:;">路由器 / 移动电源</a>
                <a href="javascript:;">保护套 / 后盖 / 贴膜</a>
                <a href="javascript:;">数据线 / 电源适配器</a>
                <a href="javascript:;">周边配件</a>
            </div>
            <!-- 轮播图 -->
            <div class="banner-slider">
                <a class="left-arrow" href="javascript:;"></a>
                <a class="right-arrow" href="javascript:;"></a>
                <div class="round-group">
                    <a class="slider-round slider-round-selected" href="javascript:;"></a>
                    <a class="slider-round" href="javascript:;"></a>
                    <a class="slider-round" href="javascript:;"></a>
                    <a class="slider-round" href="javascript:;"></a>
                    <a class="slider-round" href="javascript:;"></a>
                </div>
            </div>
        </div>
    </div>

    <!-- banner下面一块 -->
    <div class="recommend">
        <div class="recommend-container">
                <div class="recommend-item">
                    <!-- 这里从静态样张无法判断按a标签的响应范围 -->
                    <a class="recommend-service-item" href="javascript:;">
                        <div class="service-icon mma"></div>
                        <div class="service-name">M码通道</div>
                    </a>
                    <a class="recommend-service-item" href="javascript:;">
                        <div class="service-icon renew"></div>
                        <div class="service-name">以旧换新</div>
                    </a>
                    <a class="recommend-service-item" href="javascript:;">
                        <div class="service-icon accident"></div>
                        <div class="service-name">魅族意外保</div>
                    </a>
                    <a class="recommend-service-item" href="javascript:;">
                        <div class="service-icon query"></div>
                        <div class="service-name">回购单查询</div>
                    </a>
                </div>
                <a class="recommend-item band-day" href="javascript:;"></a>
                <a class="recommend-item meilan-max" href="javascript:;"></a>
                <a class="recommend-item power-supply" href="javascript:;"></a>
                <a class="recommend-item dash-recorder" href="javascript:;"></a>
        </div>
    </div>
    <!-- 手机陈列展示区 -->
    <div class="phone">
        <div class="phone-container">
            <div class="phone-tittle">手机</div>
            <!-- 素材缺灰色箭头图片 自己裁的没有去底色 -->
            <a  class="phone-more" href="javascript:;">更多 <span class="more-arrow"></span></a>
            <div class="phone-show-container">
                <a href="javascript:;" class="phone-show-item">
                    <div class="phone-pic"><img src="images/CnQOjVf6EfOAKlj2AAvhVMfnh40856_180x180.png" alt=""></div>
                    <div class="phone-name">魅族note3</div>
                    <div class="phone-date">11日-12日 限量开售</div>
                    <div class="phone-price"><span>￥</span> 799</div>
                    <span class="hot"><p>热卖</p></span>
                </a>
                <a href="javascript:;" class="phone-show-item">
                    <div class="phone-pic"><img src="images/CnQOjVf8Qm2AGJwmAAf5c4NUNpI085_180x180.png" alt=""></div>
                    <div class="phone-name">魅蓝3</div>
                    <div class="phone-date">11日-12日 公开版限量开售</div>
                    <div class="phone-price"><span>￥</span> 599</div>
                </a>
                <a href="javascript:;" class="phone-show-item">
                    <div class="phone-pic"><img src="images/CnQOjVffSHOAaRkmAA0Rkx2XjKE222_180x180.png" alt=""></div>
                    <div class="phone-name">魅蓝3s</div>
                    <div class="phone-date">11日-12日 限量开售</div>
                    <div class="phone-price"><span>￥</span> 699</div>
                    <span class="hot"><p>热卖</p></span>
                </a>
                <a href="javascript:;" class="phone-show-item">
                    <div class="phone-pic"><img src="images/CnQOjVf4y6iAe-3RAAbqolcyaco939_180x180.png" alt=""></div>
                    <div class="phone-name">魅蓝 metal</div>
                    <div class="phone-date">领券立减100元</div>
                    <div class="phone-price"><span>￥</span> 999</div>
                    <span class="hot sale"><p>特惠</p></span>
                </a>
                <a href="javascript:;" class="phone-show-item">
                    <div class="phone-pic"><img src="images/CnQOjVffSHOAaRkmAA0Rkx2XjKE222_180x180.png" alt=""></div>
                    <div class="phone-name">魅蓝 E</div>
                    <div class="phone-date">全网通 多彩金属机身</div>
                    <div class="phone-price"><span>￥</span> 799</div>
                    <span class="hot"><p>热卖</p></span>
                </a>
            </div>
        </div>
    </div>
    <!-- 帮助区 -->
    <div class="help">
        <div class="help-container">
            <div class="help-item">
                <div class="help-item-tittle">帮助说明</div>
                <a href="javascript:;" class="help-item-a" href="">支付方式</a>
                <a href="javascript:;" class="help-item-a" href="">配送说明</a>
                <a href="javascript:;" class="help-item-a" href="">售后服务</a>
                <a href="javascript:;" class="help-item-a" href="">付款帮助</a>
            </div>
            <div class="help-item">
                <div class="help-item-tittle">Flyme</div>
                <a href="javascript:;" class="help-item-a" href="">开放平台</a>
                <a href="javascript:;" class="help-item-a" href="">固件下载</a>
                <a href="javascript:;" class="help-item-a" href="">软件商店</a>
                <a href="javascript:;" class="help-item-a" href="">查找手机</a>
            </div>
            <div class="help-item">
                <div class="help-item-tittle">关于我们</div>
                <a href="javascript:;" class="help-item-a" href="">关于魅族</a>
                <a href="javascript:;" class="help-item-a" href="">加入我们</a>
                <a href="javascript:;" class="help-item-a" href="">联系我们</a>
                <a href="javascript:;" class="help-item-a" href="">法律声明</a>
            </div>
            <div class="help-item">
                <div class="help-item-tittle">关注我们</div>
                <a href="javascript:;" class="help-item-a" href="">新浪微博</a>
                <a href="javascript:;" class="help-item-a" href="">腾讯微博</a>
                <a href="javascript:;" class="help-item-a" href="">QQ空间</a>
                <a href="javascript:;" class="help-item-a" href="">官方微信</a>
            </div>
            <div class="help-item hotline">
                <div class="help-item-tittle">24小时全国服务热线</div>
                <div class="tel-number">400-788-3333</div>
                <a href="javascript:;" class="help-item-a" href=""><div class="online-24h">24小时在线客服</div></a>
            </div>
        </div>
    </div>

    <!-- footer -->
    <footer>
        &copy 2016 Meizu Telecom Equipment Co., Ltd. All rights reserved.&nbsp;&nbsp;备案号：粤ICP备13003602号-2&nbsp;&nbsp;经营许可证编号：粤B2-20130198&nbsp;&nbsp;营业执照
        <img src="images/footer-copy-1.png" alt="">
        <img src="images/footer-copy-2.png" alt="">
        <img src="images/trust-icon.png" alt="">
    </footer>
</body>
</html>